<!--
 * @Author: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @Date: 2024-04-19 10:38:37
 * @LastEditors: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @LastEditTime: 2024-04-20 11:57:52
 * @FilePath: \vue-project\src\components\GlobalNavbar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { computed } from 'vue';
import { getImg } from '@/utils/index.js'
const props = defineProps({
    height: {
        type: String,
        default: ""
    },
    img: {
        type: String,
        default: ""
    },
    title: {
        type: String,
        default: ""
    },
    textOne: {
        type: String,
        default: ''
    },
    textTwo: {
        type: String,
        default: ''
    }
})

const imgUrl = computed(() => {
    return getImg(props.img)
})
</script>


<template>
    <div class="navbar" :style="{ height, background: `url(${imgUrl}) no-repeat center/cover` }">
        <h3>{{ title }}</h3>
        <p>{{ textOne }}</p>
        <p>{{ textTwo }}</p>
    </div>
</template>



<style lang="scss" scoped>
.navbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 250px;
    color: white;
    text-align: center;
    background-color: url('@/assets/img/toppic04.png');

    h3 {
        font-size: 40px
    }

    p {
        font-size: 22px
    }
}
</style>